<div class="main">
  <div class="topbar">
    <nav>
      <div class="name">DSIGS —— Device Scheduling Instructions Generator And Simulator</div>
    </nav>
  </div>

  <div class="tab">
    <ul id="tablabel">
      <li id="requirements" (click)="change_Menu('requirements')">ServiceRequirements</li>
      <li id="devicerequirements" (click)="change_Menu('devicerequirements')">DeviceRequirements</li>
      <li id="problemdiagram" (click)="change_Menu('problemdiagram')">ProblemDiagram</li>
      <li id="systembehaviours" (click)="change_Menu('systembehaviours')">SystemBehaviours</li>
      <li id="scenario" (click)="change_Menu('scenario')">ScenarioDiagram</li>
      <li id="instructions" (click)="change_Menu('instructions')">Instructions</li>
      <li id="simulation" (click)="change_Menu('simulation')">Simulation</li>
    </ul>
  </div>

  <div id="requirementsPanel" class="pure-g">
    <div class="pure-u-1-5">
      <b id="template_introduction" class="introduction_not_margin_left">Templates and examples:</b>
      <div id="templates">
        <ul>
          <li class="title"><b>Templates</b></li>
          <li><b>'ALWAYS' Requirements：</b></li>
          <li>state <b class="highlight">SHOULD ALWAYS BE ACTIVE</b></li>
          <li>attribute <b class="highlight">SHOULD ALWAYS BE ABOVE/BELOW</b> value</li>
          <li></li>
          <li><b>'NEVER' Requirements：</b></li>
          <li>event <b class="highlight">SHOULD NEVER HAPPEN</b></li>
          <li>attribute <b class="highlight">SHOULD NEVER BE ABOVE/BELOW</b> value</li>
          <li>[state1,state2,...] <b class="highlight">SHOULD NEVER OCCUR TOGETHER</b></li>
          <li></li>
          <li><b>'PREFERRED' Requirements：</b></li>
          <li><b class="highlight">PREFERRED</b> attribute <b class="highlight">IS</b> value</li>
          <li></li>
          <li><b>'IF-THEN' Requirements：</b></li>
          <li><b class="highlight">IF</b> trigger <b class="highlight">(FOR TIME)</b> <b class="highlight">THEN</b>
            event
          </li>          
          <li><b class="highlight">IF</b> trigger <b class="highlight">(FOR TIME)</b> <b class="highlight">THEN</b>
            state
          </li>
          <li><b class="highlight">IF</b> trigger <b class="highlight">(FOR TIME)</b> <b class="highlight">THEN</b>
            effect
          </li>
          <li><br></li>
          <li class="title"><b>Examples</b></li>
          <li>ac.coldon <b class="highlight">SHOULD ALWAYS BE ACTIVE</b></li>
          <li>air.temperature <b class="highlight">SHOULD ALWAYS BE ABOVE</b> 0</li>
          <li>ac.turnoncold <b class="highlight">SHOULD NEVER HAPPEN</b></li>
          <li>air.temperature <b class="highlight">SHOULD NEVER BE BELOW</b> 0</li>
          <li>[ac.coldon,window.wopen,...] <b class="highlight">SHOULD NEVER OCCUR TOGETHER</b></li>
          <li><b class="highlight">PREFERRED</b> air.temperature <b class="highlight">IS</b> 25</li>
          <li><b class="highlight">IF</b> air.temperature>30 <b class="highlight">(FOR 10m)</b> <b
              class="highlight">THEN</b> ac.turnoncold</li>
          <li><b class="highlight">IF</b> air.temperature>30 <b class="highlight">(FOR 10m)</b> <b
              class="highlight">THEN</b> ac.coldon</li>
          <li><b class="highlight">IF</b> air.humidity>30 <b class="highlight">(FOR 10m)</b> <b
              class="highlight">THEN</b>
            allow ventilating the room</li>
        </ul>
      </div>
    </div>
    <div class="pure-u-2-5">
      <b id="input_introduction" class="introduction">Please enter the requirements:</b>
      <ngx-monaco-editor id="input_textarea" class="input" [options]="editorOptions" [(ngModel)]="requirementTexts"
        (onInit)="monacoOnInit($event)"></ngx-monaco-editor>
      <b id="complemented_introduction" class="introduction">Requirements completion</b>
      <ngx-monaco-editor id="complemented_textarea" class="complemented" [options]="editorOptions"
        [(ngModel)]="complementedRequirements" (onInit)="monacoOnInit($event)"></ngx-monaco-editor>
    </div>
    <div class="pure-u-2-5">
      <b id="scenario_introduction" class="introduction">Service requirement scenario diagram:</b>
      <div id="srSCDPanel">
        <div *ngIf="srImgLoadingFlag; else srDiplay" class="lds-default srLoading"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
        <ng-template #srDiplay>
          <a [href]="srImgURL" target="_blank">
            <img [src]="srImgURL" class="content" id="srcontent" />
          </a>
        </ng-template>
      </div>
    </div>
  </div>

  <div id="devicerequirementsPanel" class="pure-g">
    <div class="pure-u-1-2">
      <b id="devicerequirementstext_introduction" class="introduction_not_margin_left">Device related requirements:</b>
      <ngx-monaco-editor id="device_textarea" class="input" [options]="editorOptions" [(ngModel)]="functionalRequirements"
        (onInit)="monacoOnInit($event)"></ngx-monaco-editor>
      <!-- <div class="drTab">
        <ul id="tablabel">
          <li id="solvableErrorsTab" (click)="change_Error_Menu('solvable')">Resolvable errors</li>
          <li id="unsolvableErrorsTab" (click)="change_Error_Menu('unsolvable')">Unresolvable errors</li>
          <li id="resourceTab" (click)="change_Error_Menu('resource')">Resources used</li>
        </ul>
      </div> -->
      <!-- <div id="solvableErrorsPanel" class="errorsPanel">
        <ul *ngFor="let error of solvableErrors">
          <li class="liClass">{{error}}</li>
        </ul>
        <button id="solveButton" class="button" (click)="solve()">Resolve</button>
      </div>
      <div id="unsolvableErrorsPanel" class="errorsPanel">
        <ul *ngFor="let error of unsolvableErrors">
          <li class="liClass">{{error}}</li>
        </ul>
      </div>
      <div id="resourcePanel" class="resourcePanel">
        <ul *ngFor="let resource of resources">
          <li>{{resource}}</li>
        </ul>
      </div> -->
    </div>

    <div class="pure-u-1-2">
      <b class="introduction">Device requirement scenario diagram:</b>
      
      <div id="drSCDPanel">
        <div *ngIf="drImgLoadingFlag; else drDiplay" class="lds-default drLoading"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
        <ng-template #drDiplay>
          <a [href]="drImgURL" target="_blank">
            <img [src]="drImgURL" class="content" id="drcontent" />
          </a>
        </ng-template>
      </div>
    </div>
  </div>

  <div id="problemdiagramPanel" class="pure-g">
    <div class="pure-u-4-5">
      <div id="content"></div>
    </div>

    <div class="pure-u-1-5">
      <b class="introduction_not_margin_left">Information panel:</b>
      <div class="informationPanel" id="informationPanel">
        <ul>
          <li *ngIf="!open2;else elseOpen2" (click)="setOpen2()" class="title">&nbsp;+ All phenomena</li>
          <ng-template #elseOpen2>
            <li (click)="setOpen2()" class="title">&nbsp;- All phenomena</li>
            <div class="content">
              <table *ngIf="open2" class="content">
                <tr>
                  <th>Name</th>
                  <th>Initiator</th>
                  <th>Receiver</th>
                  <th>Description</th>
                  <th>PheType</th>
                </tr>
                <tr *ngFor="let phenomonon of phenomena">
                  <th>phe{{phenomonon.biaohao}}</th>
                  <th>{{phenomonon.from.shortName}}</th>
                  <th>{{phenomonon.to.shortName}}</th>
                  <th>{{phenomonon.name}}</th>
                  <th>{{phenomonon.state}}</th>
                </tr>
              </table>
            </div>
          </ng-template>
          <li *ngIf="!open4;else elseOpen4" (click)="setOpen4()" class="title">&nbsp;+ Reference phenomena</li>
          <ng-template #elseOpen4>
            <li (click)="setOpen4()" class="title">&nbsp;- Reference phenomena</li>
            <div class="content">
              <table *ngIf="open4" class="content">
                <tr>
                  <th>Name</th>
                  <th>Req</th>
                  <th>Initiator</th>
                  <th>Receiver</th>
                  <th>Content</th>
                  <th>RefType</th>
                </tr>
                <tr *ngFor="let reference of referencePhenomena">
                  <th>phe{{reference.biaohao}}</th>
                  <th>req{{reference.requirement.biaohao}}</th>
                  <th>{{reference.from.shortName}}</th>
                  <th>{{reference.to.shortName}}</th>
                  <th>{{reference.name}}</th>
                  <th *ngIf="reference.constraining === true">constraining</th>
                  <th *ngIf="reference.constraining === false">normal</th>
                </tr>
              </table>
            </div>
          </ng-template>
          <li *ngIf="!open5;else elseOpen5" (click)="setOpen5()" class="title">&nbsp;+ PD information</li>
          <ng-template #elseOpen5>
            <li (click)="setOpen5()" class="title">&nbsp;- PD information</li>
            <div class="content">
              <table *ngIf="open5" class="content">Information</table>
            </div>
          </ng-template>
        </ul>
      </div>
    </div>
  </div>

  <div id="systembehavioursPanel" class="pure-g">
    <div class="pure-u-1-2">
      <b class="introduction">System behaviours:</b>
      <div id="systembehaviourstext">
        <ul *ngFor="let rule of rules">
          <li class="liClass">{{rule}}</li>
        </ul>
      </div>
    </div>

    <div class="pure-u-1-2">
      <b class="introduction">System behaviour scenario diagram:</b>
      <div id="sbSCDPanel">
        <div *ngIf="sbImgLoadingFlag; else sbDiplay" class="lds-default sbLoading"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
        <ng-template #sbDiplay>
          <a [href]="sbImgURL" target="_blank">
            <img [src]="sbImgURL" class="content" id="sbcontent" />
          </a>
        </ng-template>
      </div>
    </div>
  </div>

  <div id="instructionsPanel">
    <b class="introduction">Device instructions:</b>
    <div id="deviceinstructiontext">
      <ul *ngFor="let instruction of instructions">
        <li class="liClass">{{instruction}}</li>
      </ul>
    </div>
  </div>

  <button class="upload button">UploadOntology
    <input class="change" type="file" multiple="multiple" (change)="selectedFileOnChanged($event)" />
  </button>
  <button class="button" (click)="displayChooseScenarioPanel()">ChooseScenario</button>
  <button class="button" (click)="complementRequirements()">CompleteRequirements</button>
  <button class="button" (click)="displayPlaningPanel()">GenerateDeviceRequirements</button>
  <!-- <button class="button" (click)="checkErrors()">CheckErrors</button> -->
  <!-- <button class="button" (click)="generateScenarioDiagrams()">DisplayPlanning</button> -->
  <!-- <details class="detail">
    <summary>DeriveProblemDiagram</summary>
    <p (click)="problemDiagramDerivation()">PDWithoutSensors</p>
    <p (click)="problemDiagramDerivation2()">PDWithSensors</p>
  </details> -->
  <button class="button" (click)="generateSystemBehaviours()">GenerateSystemBehaviours</button>
  <!-- <button class="button" (click)="generateSrSCD()">EnsureRequirements</button> -->
  <!--   
  <details class="detail">
    <summary>CheckInconsistency</summary>
      <p (click)="ruleBasedCheck()">Rule</p>
      <p (click)="formalismBasedCheck()">Formalism</p>
  </details>  -->

  <!-- <details class="detail">
    <summary>CheckSatisfaction</summary>
    <p (click)="generateScenarioDiagrams()">ScenarioDiagrams</p>
    <p (click)="NuSMVCheck()">NuSMVCheck</p>
  </details> -->

  <details class="detail">
    <summary>GenerateDeviceInstructions</summary>
    <p (click)="generateIFTTTRules()">IFTTT</p>
    <p (click)="generateDroolsRules()">Drools</p>
    <p (click)="generateOnenetRules()">Onenet</p>
  </details>

  <button class="button" (click)="runHA()">Run</button>
  <!-- <button class="button" (click)="generateSimulation()">ShowSimulation</button> -->

  <div id="planing"> Please Choose Your Preference<br />
    <label><input checked="true" type="radio" name="planingRadio" value="Random">Random</label><br />
    <label><input type="radio" name="planingRadio" value="SaveEnergy">SaveEnergy</label><br />
    <label><input type="radio" name="planingRadio" value="BestPerformance">BestPerformance</label><br />
    <button class="button" (click)="generateFunctionalRequirements()">Confirm</button>
    <button class="button" (click)="cancel()">Cancel</button>
  </div>

  <div id="chooseScenario"> Please Choose Your Scenario<br />
    <label><input checked="true" type="radio" name="scenarioRadio"
        value="SmartConferenceRoom">SmartConferenceRoom</label><br />
    <label><input type="radio" name="scenarioRadio" value="SmartHome">SmartHome</label><br />
    <button class="button" (click)="chooseScenario()">Confirm</button>
    <button class="button" (click)="cancel()">Cancel</button>
  </div>

  <div id="designateAreas">
    <div id="designateIntroduction">Please Designate The Areas of Devices</div>
    <br/>
    <div class="pure-u-3-5" id="designateIntroduction">Device</div>
    <div class="pure-u-2-5" id="designateIntroduction">Area</div>
    <br/>
    <ul *ngFor="let entityId of entityIds">
      <div class="pure-u-3-5" id="entityID">{{entityId}}</div>
      <div class="pure-u-2-5"><input type="text" id={{entityId}} name={{entityId}}></div>
    </ul>
    <button class="button" (click)="writePersonalDeviceTable()">Confirm</button>
    <button class="button" (click)="cancel()">Cancel</button>
  </div>
  <!-- <button class="button" (click)="downloadOntology()">DownloadOntology</button> -->
</div>
